<template>
    <div class="detail">
        <div class='detail-top'>
            <div class='gobackpage' @click='gobackpage()'>
                <i class='iconfont icon-jiankuohaocudazuo'></i>
            </div>
            <div class='detail-name'>
                <div class='detail-img'>
                    <img :src='detailPageMsg.image_path' alt=''/>
                </div>
                
                <div class='detail-price'>
                    <h3>{{ detailPageMsg.name }}</h3>
                    <div class='price-div'>
                        <span>￥20起送</span>
                        <span>配送费￥3.5</span>
                        <span>￥14/人</span>
                    </div>
                    <p>公告：
            温馨提示：为了能更好的让你品尝到我们享茶的茶香 请您备注需求 提前订餐 遇忙时段 请耐心等候 保持手机通畅！最后享茶全体员工祝您生活愉快！
          </p>
                </div>
            </div>
            <div class='detail-active'>
                <div class='active-sp'><span>{{detailPageMsg.activities[0].icon_name  }}</span>{{ detailPageMsg.activities[0].name }}</div>
                <div class='active-co'>{{ detailPageMsg.activities.length }}个活动</div>
            </div>
        </div>

        <div class='detail-main'>
            <!-- <mt-navbar v-model="selected">
                <mt-tab-item id="1">商品</mt-tab-item>
                <mt-tab-item id="2">评价</mt-tab-item>
                
            </mt-navbar> -->
        </div>


        <div class='detail-totalPrice'>

            <div class='totalPrice-cart'>
                <div class='cart'>
                    <i class='iconfont icon-gouwuche'></i>
                </div>
            </div>
            <div class='totalPrice'>
                <h3>¥{{ totalPrice }}</h3>
                <p>配送费¥5</p>
            </div>
            <div class='totalPrice-least'>
                {{ jiesuan }}
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
// import { Navbar, TabItem } from 'mint-ui';
// import 'mint-ui/lib/style.css'
// Vue.component(Navbar.name, Navbar);
// Vue.component(TabItem.name, TabItem);
import { mapState } from 'vuex'
export default {
    name:'Detail',
    data(){
        return {
            id:'',
            detailObj:{},
            totalPrice:0,
            jiesuan:'¥33起送',
            selected:1,
        }
    },
    computed:{
        ...mapState(['detailPageMsg'])
    },
    methods:{
        gobackpage(){
            history.go(-1);
            console.log(this.detailPageMsg)
        }
    },
    // created(){
    //     var a = window.location.href.match(/\d{9}/)[0];
    //     this.id = a;

    //     var that = this;
    //     axios.get('http://localhost:3000/detail',{
    //         params:{
    //             latitude:that.$store.state.latitude,
    //             longitude:that.$store.state.longitude,
    //             id:a
    //         }
    //     }).then(function(res){
    //         // console.log(res)
    //         if(res){
    //             that.detailObj = res.data;
    //             console.log(that.detailObj);
    //         }
    //     }).catch(function(err){
    //         console.log(err)
    //     })

    //     // https://mainsite-restapi.ele.me/shopping/restaurant/1383135?extras[]=activities&extras[]=albums&extras[]=license&extras[]=identification&latitude=22.58846&longitude=113.97459

    // }
}
</script>

<style lang="scss" scoped>
    @import '../../static/hotcss/px2rem.scss';
.detail{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    .detail-top{
        width: 100%;
        height: px2rem(263);
        background-color: #CCC;
        position: relative;
        .gobackpage{
            height: px2rem(71);
            box-sizing: border-box;
            padding: px2rem(8) px2rem(20);
            .iconfont{
                font-size: px2rem(50);
                color: #FFF;
                font-weight: normal;
            }
        }

        .detail-name{
            height: px2rem(132);
            width: 100%;
            display: flex;
            .detail-img{
                width: px2rem(168);
                box-sizing: border-box;
                padding: 0 px2rem(20);
                img{
                    width: px2rem(128);
                    height: px2rem(128);
                    // margin: 0 px2rem(20);
                }
            }
            
            .detail-price{
                height: 100%;
                color: #FFF;
                flex: 1;
                h3{
                    
                    font-size: px2rem(35);
                    line-height: px2rem(42);
                    font-weight: 700;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                .price-div{
                    // height: px2rem(50);
                    line-height: px2rem(50);
                    span{
                        // display: line-block;
                        font-size: px2rem(21);
                        // height: 100%;
                        // line-height: px2rem(50);
                    }
                    span:nth-child(2)::before{
                        content:'/';

                    }
                    span:nth-child(3)::before{
                        content:'/';
                        
                    }
                }
                p{
                    display: block;
                    width: px2rem(550);
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    font-size: px2rem(21);
                    line-height: px2rem(40);
                }
            }
        }

        .detail-active{
            height: px2rem(32);
            width: 100%;
            display: flex;
            justify-content: space-between;
            color: #FFF;
            position: absolute;
            bottom: px2rem(10);
            box-sizing: border-box;
            padding: 0 px2rem(26) 0 px2rem(20);
            .active-sp{
                // width: 80%;
                font-size: px2rem(20);
                line-height: px2rem(32);
                span{
                    background: rgb(112, 188, 70);
                    margin-right: px2rem(10);
                }
            }
            .active-co{
                font-size: px2rem(25);
                line-height: px2rem(32); 
            }
        }
    }
    // 中间主要部分
    .detail-main{
        flex: 1;
        background: red;
        
    }
    // 这里是底部计算价格的样式
    
    .detail-totalPrice{
        height:px2rem(96);
        width: 100%;
        display: flex;
        position: fixed;
        bottom: 0;
        background: #3d3d3f;
        .totalPrice-cart{
            width: px2rem(158);
            height: 100%;
            position: relative;
            .cart{
                width: px2rem(100);
                height: px2rem(100);
                border-radius: 50%;
                background: #3d3d3f;
                position: absolute;
                top: px2rem(-20);
                left: px2rem(28);
                // border: px2rem(2) solid #444;
                i{
                    font-size: px2rem(100);
                    color: #3190e8;
                }
            }
        }

        .totalPrice{
            width: px2rem(382);
            color: #FFF;
            padding: px2rem(15) 0;
            h3{
                font-size: px2rem(35);
                line-height: px2rem(43);
                font-weight: 100;
            }
            p{
                font-size: px2rem(20);
            }
        }
        .totalPrice-least{
            flex: 1;
            text-align: center;
            line-height: px2rem(96);
            font-size: px2rem(30);
            font-weight: 700;
            color: #FFF;
        }
    }
}    
</style>
